/* eslint-disable vue/no-mutating-props */
<!--
 * @Author: your name
 * @Date: 2022-03-21 22:01:58
 * @LastEditTime: 2022-03-23 20:38:20
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \vue_xiaoqi\src\components\TotsList.vue
-->
<template>
  <tr class="mytr2">
        <label><td class="mytd6"><input type="checkbox" :checked="message.done" @click="DianJi(message.id)"></td></label>
      
    <td class="mytd1">{{ message.id }}</td>
    <td class="mytd2">{{ message.date | dateYMDHMSFormat }}</td>
    <td class="mytd3">{{ message.name }}</td>
    <td class="mytd3">{{ message.evaluate }}</td>
    <td class="mytd3">
      <button>{{ message.state }}</button>
    </td>
    <td class="mytd4">
      <span v-show="!message.edit"> {{ message.title }}</span>

      <input
        type="text"
        ref="input"
        :value="message.title"
        v-show="message.edit"
        @blur="qqq(message)"
      />
    </td>
    <td class="mytd3">
      <Button
        class="compile1"
        @click="remove(message.id)"
        v-show="!message.edit"
      >
        删除</Button
      >&nbsp;
      <Button class="compile" @click="editing(message)" v-show="!message.edit">
        编辑</Button
      >
      <button v-show="message.edit" @mousedown="save(message, message.id)">
        保存
      </button>
      &nbsp;
      <button v-show="message.edit" @click="UnSave(message)">取消</button>
    </td>
  </tr>
    
 
</template>

<script>
export default {
  name: "VueTotsList",
  props: ["message", "messages"],
  data() {
    return {};
  },
  methods: {
    // 编辑
    editing(message) {
      message.edit =true;
      this.$nextTick(function () {
        this.$refs.input.focus();
      });
    },
    // 保存
    save(message, id) {
      message.edit = false;
      this.messages.forEach((message) => {
        if (message.id === id) {
          message.title = this.$refs.input.value;
        }
      });
    },
// 取消保存
UnSave(message) {
      message.edit = false;
    },
    // 删除
    remove(id) {
      this.$bus.$emit("ccc", id);
     
    },
    // 失去焦点
    qqq(message) {
    
        message.edit =false;

    },
    // 选择
     DianJi(id){
      this.messages.forEach((message)=>{
          if(message.id==id){
              message.done=!message.done
          }
      })
  }
  },
 computed:{
    
 }
};
</script>

<style>
.compile {
  color: white;
  background-color: dodgerblue;
  border: 1px solid dodgerblue;
}
.compile1 {
  color: white;
  background-color: red;
  border: 1px solid red;
}
</style>